import {
  Button,
  Descriptions,
  DescriptionsItem,
  Divider,
  FormItem,
  Image,
  ImagePreviewGroup,
  message,
  Space,
  Spin,
  TypographyText,
  TypographyTitle
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { riverApi } from '@/apis'
import { ApplyInfo } from '@/apis/riverTypes'
import { useBack } from '@/hooks/useBack'
import { useDialog } from '@/hooks/useDialog'
import { optionsToMap } from '@/utils'

import { getRejectTypeStr } from './common'
import RejectDialog from './components/rejectDialog'

export default defineComponent({
  name: 'RvSupplierDetail',
  setup() {
    const route = useRoute()
    const data = ref({} as ApplyInfo)
    const loading = ref(false)
    const isPreview = ref(false)
    const rejectDlgRef = ref({})
    const { showConfirm } = useDialog()
    const { handleCancel } = useBack('refreshSupplierList')
    onMounted(() => {
      if (route.query.type) {
        isPreview.value = true
      }
      getApplyDetail()
    })

    async function getApplyDetail() {
      try {
        data.value = await riverApi.getDetail(route.query.id)
      } finally {
      }
    }

    //驳回
    function handleReject(item) {
      //@ts-ignore
      rejectDlgRef.value.open(route.query.id, route.query.flag)
    }

    function handleRejectConfirm() {
      handleCancel()
      message.success('操作完成')
    }
    const flag = ref(route.query.flag as any)
    //审核
    function handlePass(item) {
      showConfirm({
        content: '是否确认通过审核？',
        onOk: async () => {
          try {
            if (flag.value == 1) {
              await riverApi.approve(route.query.id)
              handleCancel()
              message.success('操作完成')
            }
            if (flag.value == 2) {
              await riverApi.presidentApprove(route.query.id)
              handleCancel()
              message.success('操作完成')
            }
          } catch (error) {}
        }
      })
    }

    return {
      data,
      loading,
      isPreview,
      rejectDlgRef,
      flag,
      handleReject,
      handlePass,
      handleRejectConfirm
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Space>
          <TypographyTitle level={3}>服务商资料</TypographyTitle>
          <TypographyText
            v-show={this.data.auditStatus == 0}
            strong
            type="warning"
          >
            待审核
          </TypographyText>
          <TypographyText
            v-show={this.data.auditStatus == 1}
            strong
            type="success"
          >
            审核通过
          </TypographyText>
          <TypographyText
            v-show={this.data.auditStatus == 2}
            strong
            type="danger"
          >
            审核驳回
          </TypographyText>
        </Space>
        <FormItem
          label="拒绝理由"
          style={{ width: '500px' }}
          v-show={this.data.auditStatus == 2}
        >
          <TypographyText>{`${this.data.auditDetail}${getRejectTypeStr(
            this.data.auditDetailType
          )}`}</TypographyText>
        </FormItem>
        <Descriptions bordered column={2}>
          <DescriptionsItem label="营业执照照片">
            {this.data.licenseCopyUrl ? (
              <Image
                style={{ height: '100px' }}
                src={this.data.licenseCopyUrl}
              ></Image>
            ) : (
              '未上传'
            )}
          </DescriptionsItem>
          <DescriptionsItem label="营业执照公司名称">
            {this.data.corporateName}
          </DescriptionsItem>
          <DescriptionsItem label="统一社会信用代码">
            {this.data.licenseNumber}
          </DescriptionsItem>
          <DescriptionsItem label="服务商法人姓名">
            {this.data.legalPerson}
          </DescriptionsItem>
          <DescriptionsItem label="有效期至">
            {this.data.licenseEnd}
          </DescriptionsItem>
          <DescriptionsItem label="所在省市">
            {this.data.licenseProvince
              ? this.data.licenseProvince
              : null + this.data.licenseCity
              ? this.data.licenseCity
              : null + this.data.licenseDistrict
              ? this.data.licenseDistrict
              : null}
          </DescriptionsItem>
          <DescriptionsItem label="详细地址">
            {this.data.licenseAddress}
          </DescriptionsItem>
          <DescriptionsItem label="银行开户许可证">
            {this.data.bankLicenseCopyUrl ? (
              <Image
                style={{ height: '100px' }}
                src={this.data.bankLicenseCopyUrl}
              ></Image>
            ) : (
              '未上传'
            )}
          </DescriptionsItem>
          <DescriptionsItem label="服务商银行开户支行">
            {this.data.bankName}
          </DescriptionsItem>
          <DescriptionsItem label="服务商银行账号">
            {this.data.accountNumber}
          </DescriptionsItem>
          <DescriptionsItem label="开户行对应公司主体">
            {this.data.bankCorporateName}
          </DescriptionsItem>
          <DescriptionsItem label="证件照片">
            <ImagePreviewGroup>
              <Space>
                {this.data.idCardCopyUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardCopyUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
                {this.data.idCardNationalUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardNationalUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
                {this.data.idCardHoldUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardHoldUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
              </Space>
            </ImagePreviewGroup>
          </DescriptionsItem>
          <DescriptionsItem label="证件姓名">
            {this.data.idCardName}
          </DescriptionsItem>
          <DescriptionsItem label="身份证号">
            {this.data.idCardNumber}
          </DescriptionsItem>
          <DescriptionsItem label="有效期至">
            {this.data.cardPeriodEnd}
          </DescriptionsItem>
          <DescriptionsItem label="总裁法人姓名">
            {this.data.presidentBankLegalPerson}
          </DescriptionsItem>
          <DescriptionsItem label="总裁银行开户支行">
            {this.data.presidentBankName}
          </DescriptionsItem>
          <DescriptionsItem label="总裁银行账号">
            {this.data.presidentAccountNumber}
          </DescriptionsItem>
          <DescriptionsItem label="账号类型">
            {this.data.bankAccountType === 1 ? '公户账户' : '法人账户'}
          </DescriptionsItem>
          <DescriptionsItem label="申请人联系电话">
            {this.data.applicantMobile}
          </DescriptionsItem>
        </Descriptions>
        <Divider></Divider>
        <Space v-show={!this.isPreview} style={{ marginBottom: '50px' }}>
          <Button type="primary" onClick={this.handleReject}>
            驳回
          </Button>
          <Button type="primary" onClick={this.handlePass}>
            通过
          </Button>
        </Space>
        <RejectDialog
          ref="rejectDlgRef"
          onConfirm={this.handleRejectConfirm}
        ></RejectDialog>
      </Spin>
    )
  }
})
